자바스크립트 패턴 매칭: 구조 분해 할당 마스터하기

            const { property1, property2 } = object;
            

              
                Copy
              
            
          

            const user = {
  id: 12345,
  firstName: "Aisha",
  lastName: "Khan",
  country: "Pakistan",
  email: "aisha.khan@example.com",
  preferences: {
    language: "Urdu",
    currency: "PKR"
  }
};

            

              
                Copy
              
            
          

            const { firstName, lastName } = user;

console.log(firstName); // Output: Aisha
console.log(lastName);  // Output: Khan
            

              
                Copy
              
            
          

            const { firstName: givenName, lastName: familyName } = user;

console.log(givenName);  // Output: Aisha
console.log(familyName); // Output: Khan
            

              
                Copy
              
            
          

            const { age = 30 } = user;

console.log(age); // Output: 30 (since the user object doesn't have an 'age' property)
            

              
                Copy
              
            
          

            const { preferences: { language, currency } } = user;

console.log(language); // Output: Urdu
console.log(currency); // Output: PKR
            

              
                Copy
              
            
          

            const { preferences: { language: preferredLanguage, currency: preferredCurrency } } = user;

console.log(preferredLanguage); // Output: Urdu
console.log(preferredCurrency); // Output: PKR
            

              
                Copy
              
            
          

            const {
  firstName: givenName,
  lastName: familyName,
  preferences: { language: preferredLanguage, currency: preferredCurrency = "USD" },
  age = 30
} = user;

console.log(givenName);          // Output: Aisha
console.log(familyName);         // Output: Khan
console.log(preferredLanguage);   // Output: Urdu
console.log(preferredCurrency);  // Output: PKR
console.log(age);               // Output: 30
            

              
                Copy
              
            
          

            const { id, firstName, lastName, ...remainingUserDetails } = user;

console.log(id);                   // Output: 12345
console.log(firstName);            // Output: Aisha
console.log(lastName);             // Output: Khan
console.log(remainingUserDetails); // Output: { country: "Pakistan", email: "aisha.khan@example.com", preferences: { language: "Urdu", currency: "PKR" } }
            

              
                Copy
              
            
          

            const [element1, element2] = array;
            

              
                Copy
              
            
          

            const destinations = ["Tokyo", "Kyoto", "Osaka", "Hiroshima"];
            

              
                Copy
              
            
          

            const [firstDestination, secondDestination] = destinations;

console.log(firstDestination);  // Output: Tokyo
console.log(secondDestination); // Output: Kyoto
            

              
                Copy
              
            
          

            const [,, thirdDestination] = destinations;

console.log(thirdDestination); // Output: Osaka
            

              
                Copy
              
            
          

            const [first, second, third, fourth, fifth = "Nara"] = destinations;

console.log(fifth); // Output: Nara (since the array only has four elements)
            

              
                Copy
              
            
          

            const [firstDestination, ...otherDestinations] = destinations;

console.log(firstDestination); // Output: Tokyo
console.log(otherDestinations);  // Output: ["Kyoto", "Osaka", "Hiroshima"]
            

              
                Copy
              
            
          

            const nestedArray = [1, [2, 3], 4];
const [one, [two, three], four] = nestedArray;

console.log(one);   // Output: 1
console.log(two);   // Output: 2
console.log(three); // Output: 3
console.log(four);  // Output: 4
            

              
                Copy
              
            
          

            function displayUserInfo({ firstName, lastName, country }) {
  console.log(`Name: ${firstName} ${lastName}, Country: ${country}`);
}

displayUserInfo(user); // Output: Name: Aisha Khan, Country: Pakistan
            

              
                Copy
              
            
          

            function calculateArea([width, height]) {
  return width * height;
}

const dimensions = [10, 5];
const area = calculateArea(dimensions);

console.log(area); // Output: 50
            

              
                Copy
              
            
          

            function greetUser({ name = "Guest", greeting = "Hello" }) {
  console.log(`${greeting}, ${name}!`);
}

greetUser({ name: "Carlos" });     // Output: Hello, Carlos!
greetUser({});                    // Output: Hello, Guest!
greetUser({ greeting: "Bonjour" }); // Output: Bonjour, Guest!
            

              
                Copy
              
            
          

            async function fetchWeatherData(city) {
  const response = await fetch(`https://api.example.com/weather?q=${city}`);
  const data = await response.json();

  // Destructure the relevant data
  const { main: { temp, humidity }, weather: [{ description }] } = data;

  console.log(`Temperature: ${temp}°C, Humidity: ${humidity}%, Description: ${description}`);
}

fetchWeatherData("London");
            

              
                Copy
              
            
          

            function UserProfile({ firstName, lastName, email }) {
  return (
    <div>
      <h2>{firstName} {lastName}</h2>
      <p>Email: {email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

            function cartReducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_TO_CART":
      const { productId, quantity } = action.payload;
      // ...
      return { ...state, /* ... */ };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

            const config = {
  apiKey: "YOUR_API_KEY",
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3
};

const { apiKey, apiUrl, timeout } = config;

console.log(`Using API key: ${apiKey}, API URL: ${apiUrl}, Timeout: ${timeout}`);
            

              
                Copy
              
            
          

            let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // Output: 2
console.log(b); // Output: 1
            

              
                Copy
              
            
          

            const key = 'dynamicProperty';
const obj = { [key]: 'Value' };

// Note: Cannot directly destructure with dynamic keys like this
// const { [key]: value } = obj; // This doesn't work as expected

// Instead, you'd typically access it directly or use an intermediate variable
const value = obj[key];
console.log(value); // Output: Value

            

              
                Copy
              
            
          

            function createPoint() {
  return { x: 10, y: 20 };
}

const { x, y } = createPoint();
console.log(x, y); // Output: 10 20

function getCoordinates() {
  return [30, 40];
}

const [latitude, longitude] = getCoordinates();
console.log(latitude, longitude); // Output: 30 40
            

              
                Copy